<template>
  <div class="partner">
    <Search @sendInfo="receiveInfo" :searchTitle="'设备编号:'" />
    <div class="list">
      <el-table
        ref="singleTable"
        :data="regionInfo.currentPageRecords"
        highlight-current-row
        center
        style="width: 100%"
      >
        <el-table-column align="center" label="序号" width="120" type="index" height="45">
        </el-table-column>
        <el-table-column align="center" property="innerCode" label="设备编号"> </el-table-column>
        <el-table-column align="center" property="type.name" label="设备型号"> </el-table-column>
        <el-table-column align="center" property="node.name" label="详细地址"> </el-table-column>
        <el-table-column align="center" property="vmStatus" label="运营状态"> </el-table-column>
        <el-table-column align="center" property="status" label="设备状态"> </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button type="info" icon="el-icon-search" size="mini" @click.native="seeDetails(row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :searchTaskList="regionInfo"
        @currentSizeChange="(value) => (partnerInfoParams.pageSize = value)"
        @currentPageChange="(value) => (partnerInfoParams.pageIndex = value)"
      />
    </div>
    <!-- 合作商详情 -->
    <Dialog :dialogVisibleInfo="dialogVisibleDetails">
      <template #body>
        <div class="partnercontent">
          <div class="text">
            <p>合作商名称:</p>
            <span>{{ partnerDetailInfo.name }}</span>
          </div>
          <div class="text">
            <p>联系人:</p>
            <span>{{ partnerDetailInfo.contact }}</span>
          </div>
          <div class="text">
            <p>联系电话:</p>
            <span>{{ partnerDetailInfo.mobile }}</span>
          </div>
          <div class="text">
            <p>分成比例:</p>
            <span>{{ partnerDetailInfo.ratio + '%' }}</span>
          </div>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script>
import { searchEquipmentAPI } from '@/api'

export default {
  name: 'Partner',
  data() {
    return {
      // 搜索框
      searchInfo: '',
      // 获取合作商数据的参数
      partnerInfoParams: {
        pageIndex: 1,
        pageSize: 10
      },
      // 渲染区域列表的数据,
      regionInfo: {
        currentPageRecords: []
      },
      // 查看详情
      dialogVisibleDetails: {
        dialogTitle: '合作商详情',
        dialogVisible: false,
        dialogWidth: '30%'
      },
      // 渲染详情的信息
      partnerDetailInfo: {
        name: '',
        contact: '',
        ratio: '',
        mobile: ''
      }
    }
  },
  created() {
    this.fecthPartnerList(this.partnerInfoParams)
  },

  methods: {
    // 搜索框事件
    receiveInfo(value) {
      if (this.searchInfo !== value) {
        this.searchInfo = value
        this.partnerInfoParams.pageIndex = 1
        this.fecthPartnerList({ ...this.partnerInfoParams, name: this.searchInfo })
      }
    },
    // 获取数据
    async fecthPartnerList(data) {
      const res = await searchEquipmentAPI(data)
      console.log(res.data)
      this.regionInfo = res.data
    },
    // 查看详情
    seeDetails(row) {
      this.partnerDetailInfo.name = row.name
      this.partnerDetailInfo.contact = row.contact
      this.partnerDetailInfo.ratio = row.ratio
      this.partnerDetailInfo.mobile = row.mobile
      this.dialogVisibleDetails.dialogVisible = true
    }
  },
  watch: {
    partnerInfoParams: {
      handler() {
        this.fecthPartnerList({ ...this.partnerInfoParams, name: this.searchInfo })
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  padding: 20px 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 10px rgb(240, 239, 239);
  .el-col {
    margin-bottom: 20px;
  }
  /deep/.el-table th.el-table__cell {
    background-color: rgb(243, 246, 251);
  }
  /deep/tr.el-table__row {
    height: 45px !important;
  }

  /deep/.el-table td.el-table__cell {
    border: none;
    height: 0px;
    padding: 0;
    .el-button {
      height: 30px;
      line-height: 1px;
      margin: 10px 0 10px 10px;
      width: 80px;
    }
    .el-button--info,
    .el-button--success {
      width: 100px;
    }
  }
  /deep/.el-table th.el-table__cell.is-leaf {
    border: none;
  }
  /deep/.el-button--warning {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    text-align: center;
    .icon-jiahao:before {
      content: '\e726';
      margin-right: 5px;
    }
  }
  /deep/.el-button--info {
    background-color: #fbf4f0 !important;
    border: none;
    color: #333;
  }
  /deep/.el-table::before {
    height: 0;
  }
}
.confirm {
  width: 100%;
  padding-left: 20%;
  /deep/.el-button--primary {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
  }
}
</style>
